<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../js/ztree/bootstrapStyle.css">
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <style>
        .sku_box {
            overflow: hidden;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
<header class="navbar clearfix" id="header"></header>
<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">
            <!-- SIDEBAR MENU -->
            <ul>
            </ul>
            <!-- /SIDEBAR MENU -->
        </div>
    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
        <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row" style="height: 30px;">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->
                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li><i class="fa fa-home"></i> <a href="../index.html">首页</a>
                                    </li>
                                    <li><a href="#">商品管理</a></li>
                                    <li>发货拆分规则</li>
                                </ul>
                                <!-- /BREADCRUMBS -->
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4>
                                        <i class="fa fa-bars"></i>
                                        拆分明细
                                    </h4>
                                </div>
                                <div class="box-body sku_box">
                                    <div class="sku_top">
                                        <div class="col-md-12 form-group mrg-bt10">
                                            <label class="col-sm-1 control-label" style="min-width:140px;">目标skuCode：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control" placeholder="请输入目标skuCode" type="text" name="targetSkuCode">
                                            </div>
                                        </div>
                                        <div class="col-md-12 form-group mrg-bt10">
                                            <label class="col-sm-1 control-label" style="min-width:140px;">发货日期：</label>
                                            <div class="col-sm-2">
                                                <select id="sendWeekDay" class="col-md-12" tabindex="-1" name="sendTime">
                                                    <option value=-1>请选择</option>
                                                    <option value=1>星期一</option>
                                                    <option value=2>星期二</option>
                                                    <option value=3>星期三</option>
                                                    <option value=4>星期四</option>
                                                    <option value=5>星期五</option>
                                                    <option value=6>星期六</option>
                                                    <option value=7>星期七</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12 form-group mrg-bt10">
                                            <label class="col-sm-1 control-label" style="min-width:140px;">发货数量：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control" name="sendQuantity" value="1" disabled>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="sku_bottom">
                                        <div class="col-md-10">
                                            <table class="table table-bordered">
                                                <thead>
                                                <th style="width:30%">原skuCode</th>
                                                <th style="width:30%">拆分数量</th>
                                                <th style="width:10%">操作</th>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="btn btn-primary btn-add">添加</span>
                                        <span class="btn btn-success btn-save">保存</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="overflow:hidden; color: red;margin-bottom: 10px;line-height: 30px;">
                            <label class="col-sm-1 control-label"> 说明：</label>
                            <div class="col-sm-11">
                                原skuCode：需要拆分发货的商品； </br>
                                拆分数量：一件原sku 需要拆分为几件目标sku；</br>
                                发货数量： 拆分后每次发货数量（目标sku数量），默认为1；
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table>
        <tr class="sku_tr_clone sku_tr none">
            <td>
                <input type="text" name='sourceSkuCode' class="form-control skuId" placeholder="请输入原skuCode">
            </td>
            <td>
                <input type="text" name="targetQuantity" class="form-control splitQuantity" placeholder="请输入拆分数量">
            </td>
            <td>
                <span class="btn btn-danger btn-delete">删除</span>
            </td>
        </tr>
    </table>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../../js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/ztree/jquery.ztree.excheck.js"></script>

<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>

    var sku = function () {
        var skuArray = [];

        var getSplitRule = function (targetSkuCode) {
            $.ajax({
                type: "get",
                url: App.getContextPath() + "admin/sendDetail/getSplitRuleByTargetSku.do",
                data: {
                    targetSkuCode: targetSkuCode
                },
                async: true,
                success: function (result) {
                    var data = result.extra;
                    console.log(data)
                    $('input[name=targetSkuCode]').val(data.targetSkuCode);
                    $("#sendWeekDay").select2().val(data.sendWeekDay).trigger("change");
                    $('input[name=sendQuantity]').val(data.sendQuantity);
                    skuArray = data.pendingSplitSkuList;
                    renderingSourceSku();
                }

            });

        }

        var renderingSourceSku = function () {
            skuArray.forEach(function (sku) {
                console.log(sku)
                var copyDom = $('.sku_tr_clone').clone().removeClass('none').removeClass('sku_tr_clone');
                copyDom.find('input[name=sourceSkuCode]').val(sku.sourceSkuCode)
                copyDom.find('input[name=targetQuantity]').val(sku.targetQuantity)
                $('.table tbody').append(copyDom)

            });
        }
        var addSourceSku = function () {
            if (skuArray.length) { // 有数据的时候判断最后一条是否填写完成!
                var last = skuArray[skuArray.length - 1]
                if (!last.sourceSkuCode || !last.targetQuantity) {
                    $.alert('请把数据填写完整在添加!')
                    return false
                }
            }
            var copyDom = $('.sku_tr_clone').clone().removeClass('none').removeClass('sku_tr_clone');
            var obj = {
                sourceSkuCode: null,
                targetQuantity: null
            }
            copyDom.find('input[name=sourceSkuCode]').val(obj.sourceSkuCode)
            copyDom.find('input[name=targetQuantity]').val(obj.targetQuantity)
            skuArray.push(obj)
            $('.table tbody').append(copyDom)
        }
        var delSourceSku = function () {
            var $tr = $(this).closest('tr');
            var index = $tr.index();
            skuArray.splice(index, 1);
            $tr.remove()
        }
        var save = function () {
            var targetSkuCode = $('input[name=targetSkuCode]').val();
            var sendWeekDay = $("#sendWeekDay").val();
            var sendQuantity = $('input[name=sendQuantity]').val();
            if (targetSkuCode === '' || sendWeekDay == -1 || sendQuantity === '') {
                $.alert("请输入必输项");
                return;
            }
            if (skuArray == null || skuArray.length === 0) {
                $.alert("请输入待拆分sku");
                return;
            }
            var hasError = false;
            skuArray.forEach(function (sku) {
                console.log(sku)
                if (sku.sourceSkuCode == null || sku.sourceSkuCode === '' || sku.targetQuantity == null || sku.targetQuantity === '' || sku.targetQuantity == 0) {
                    $.alert("请待拆分sku信息输入有误");
                    hasError = true;
                }
            });
            console.log(hasError)
            if (hasError) {
                return;
            }
            var spiltRule = {}
            spiltRule.targetSkuCode = targetSkuCode;
            spiltRule.sendWeekDay = sendWeekDay;
            spiltRule.sendQuantity = sendQuantity;
            spiltRule.pendingSplitSkuList = skuArray;
            var data = JSON.stringify(spiltRule);
            console.log(data)
            $.ajax({
                type: "post",
                url: App.getContextPath() + "admin/sendDetail/setDetailSplitRule.do",
                data: data,
                contentType: 'application/json',
                success:
                    function (result) {
                        if (result.type === 'success') {
                            $.alert("保存成功");
                        } else {
                            $.alert(result.content);
                        }
                    }

            })
            ;

        }
        return {
            init: function () {
                var targetSkuCode = $.getUrlParam("targetSkuCode");
                if (targetSkuCode != null && targetSkuCode !== '') {
                    getSplitRule(targetSkuCode);
                } else {
                    $("#sendWeekDay").select2();
                }
                // 添加一行数据
                $('body').on('click', '.btn-add', addSourceSku)
                // 删除数据
                $('body').on('click', '.btn-delete', delSourceSku)
                // 编辑数据
                $('body').on('keyup', '.sku_tr input', function (e) {
                    var $this = $(this)
                    var name = $this.attr('name')
                    var index = $(this).closest('tr').index();
                    skuArray[index][name] = $this.val()
                });
                $('body').on('click', '.btn-save', save)

            }
        }
    }();
    $(function () {
        $("#header").load("../head.html");
        App.init();
        sku.init();
    });
</script>
<!-- /JAVASCRIPTS -->
</body>

</html>